<template>
  <div :id="id" :style="{height:height,width:width}"></div>
</template>

<script>
import cityMap from '@/utils/mock/MapJs/china-main-city-map'
import resize from '@/utils/resize'
export default {
    mixins: [resize],
    data () {
      return {
        chart: null,
        data: [],
        inter: null
      }
    },
    props: {
        id: {
            type: String,
            default: 'id'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '500px'
        }
    },
    beforeDestroy() {
      if (!this.chart) {
      return
      }
      this.chart.dispose()
      clearInterval(this.inter)
      this.chart = null
    },
    mounted () {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.mapChart()
    //   this.chart.on('click', this.chartClick)
    },
    activated () {

    },
    methods: {
        mapChart () {
            const province = require('@/utils/mock/json/world.json')
            this.$echarts.registerMap('world', province)
            this.registerAndsetOption(this.chart)
        },
        registerAndsetOption: function (myChart) {
            var geoCoordMap = {
                '1': [-4.388361, 11.186148],
                '2': [-118.24311, 34.052713],
                '3': [114.195466, 22.282751],
                '4': [-87.801833, 41.870975],
                '5': [-4.62829, 7.72415],
                '6': [-1.657222, 51.886863],
                '7': [10.01959, 54.38474],
                '8': [45.326912, 41.101891],
                '9': [89.116876, 67.757906],
                '10': [-48.678945, -10.493623],
                '11': [31.815593, 31.418032],
                '12': [2.175129, 41.385064]
            };
             var planePath =
        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
var oneData = [
        [
          {
            name: "1"
          },
          {
            name: "2",
            value: 20
          }
        ],
        [
          {
            name: "1"
          },
          {
            name: "3",
            value: 20
          }
        ],
        [
          {
            name: "1"
          },
          {
            name: "4",
            value: 20
          }
        ]
      ];
      var twoData = [
        [
          {
            name: "5"
          },
          {
            name: "6",
            value: 20
          }
        ],
        [
          {
            name: "5"
          },
          {
            name: "7",
            value: 20
          }
        ],
        [
          {
            name: "5"
          },
          {
            name: "8",
            value: 20
          }
        ]
      ];
      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = geoCoordMap[dataItem[1].name];
          var toCoord = geoCoordMap[dataItem[0].name];
          if (fromCoord && toCoord) {
            res.push({
              fromName: dataItem[1].name,
              toName: dataItem[0].name,
              coords: [fromCoord, toCoord]
            });
          }
        }
        return res;
      };

      var color = ["#a6c84c", "#ffa022", "#46bee9"];
      var series = [];
      [["1", oneData], ["5", twoData]].forEach(function(
        item,
        i
      ) {
        series.push(
          {
            name: item[0],
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke"
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{b}"
              }
            },
            symbolSize: function(val) {
              return val[2] / 10;
            },
            showEffectOn: "render",
            itemStyle: {
              normal: {
                color: color[i]
              }
            },
            data: [
              {
                name: item[0],
                value: geoCoordMap[item[0]].concat([100])
              }
            ]
          },
          /* {
            name: item[0] + " Top10",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 1,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: "#fff",
              symbolSize: 3
            },
            lineStyle: {
              normal: {
                color: color[i],
                width: 0,
                curveness: 0.2
              }
            },
            data: convertData(item[1])
          }, */
          {
            name: item[0] + " Top10",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 2,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: planePath,
              symbolSize: 15
            },
            lineStyle: {
              normal: {
                color: color[i],
                width: 1,
                opacity: 0.4,
                curveness: 0.2
              }
            },
            data: convertData(item[1])
          },
          {
            name: item[0] + " Top10",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke"
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{b}"
              }
            },
            symbolSize: function(val) {
              return val[2] / 4;
            },
            showEffectOn: "render",
            itemStyle: {
              normal: {
                color: color[i]
              }
            },
            data: item[1].map(function(dataItem) {
              return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
              };
            })
          }
        );
      });

            var pro = {
                backgroundColor: '#fff',
                title: {
                    text: '',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: "item",
                    backgroundColor: "#1540a1",
                    borderColor: "#FFFFCC",
                    showDelay: 0,
                    hideDelay: 0,
                    enterable: true,
                    transitionDuration: 0,
                    extraCssText: "z-index:100",
                    /* formatter: function(params, ticket, callback) {
                        //根据业务自己拓展要显示的内容
                        var res = "";
                        var name = params.name;
                        var value = params.value[params.seriesIndex + 1];
                        res =
                            "<span style='color:#fff;'>" +
                            name +
                            "</span><br/>数据：" +
                            value;
                        return res;
                    } */
                },
                visualMap: {
                    //图例值控制
                    min: 0,
                    max: 10000,
                    show: false,
                    calculable: true,
                
                    color: ['blue'],
                    textStyle: {
                        color: "#fff"
                    },
                    areaColor:'#004981'
                },
                geo: {
                    map: "world",
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true, //是否允许缩放
                    layoutCenter: ["50%", "50%"], //地图位置
                    layoutSize: "180%",
                    itemStyle: {
                        normal: {
                            areaColor: '#edf0f4',
                            borderColor: '#fff'
                        },
                        // emphasis: {
                        //     areaColor: '#edf0f4'
                        // }
                    }
                },
                series: series
            }
            myChart.setOption(pro)
        
      },
      chartClick: function (params) {
        
      }
    }
  }
</script>
<style scoped>
  
</style>
